<template>
  <div class="creative">
    <!-- 路由页面是在授课程、已授课程才显示 -->
    <div
      class="creativeInfo"
      :style="[
        {
          backgroundImage:
            'url(' + require('@/assets/images/teacherBg.png') + ')',
        },
      ]"
      v-if="
        $route.name !== 'Creativeourse' && $route.name !== 'create_browseDetail'
      "
    >
      <div class="container">
        <breadcrumb />
        <div class="position">
          <div class="picture">
            <img v-lazy="headPic" />
          </div>
          <div class="info">
            <div class="name">
              {{ userInfo.nickName || userInfo.regName || userInfo.email }}
            </div>
            <div
              class="label"
              v-for="(item, index) in userInfo.authName"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- "命名视图" 在查看在授课程、已授课程时显示 -->
    <div v-if="$route.name !== 'Creativeourse'">
      <Nav :courseCount="getCourseCount" />
      <coursesList v-if="pageName == 'coursesList'" />
      <courseSubmitted v-if="pageName == 'courseSubmitted'" />
      <coursePublished v-if="pageName == 'coursePublished'" />
      <courseTemplate v-if="pageName == 'CourseTemplate'" />
      <browseOtherCourse v-if="pageName == 'BrowseOtherCourse'" />
      <latelyDelete v-if="pageName == 'LatelyDelete'" />
    </div>
    <!-- <router-view name="creativeNav"></router-view> -->
    <keep-alive>
      <router-view
        v-if="$route.meta.keepAlive && $route.name == 'Creativeourse'"
        :key="$route.path"
      ></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive  && $route.name == 'Creativeourse'"></router-view>
  </div>
</template>

<script>
import breadcrumb from "@/components/Breadcrumb/index";
import { mapState } from "vuex";
// import { location } from '@/util/tool';
const Nav = () => import("@/components/creativePge/creativeNav");
const coursesList = () =>
  import("@/views/creativeCourses/coursesList/coursesList");
const courseSubmitted = () =>
  import("@/views/creativeCourses/courseSubmitted/courseSubmitted");
const coursePublished = () =>
  import("@/views/creativeCourses/coursePublished/coursePublished");
const courseTemplate = () =>
  import("@/views/creativeCourses/courseTemplate/courseTemplate");
const browseOtherCourse = () =>
  import("@/views/creativeCourses/browseOtherCourse/browseOtherCourse");
const latelyDelete = () =>
  import("@/views/creativeCourses/latelyDelete/latelyDelete");

export default {
  components: {
    breadcrumb,
    Nav,
    coursesList,
    courseSubmitted,
    coursePublished,
    courseTemplate,
    browseOtherCourse,
    latelyDelete,
  },
  data() {
    return {
      currRN: ["coursesList", "courseSubmitted"],
      pageName: "",
    };
  },
  watch: {
    $route(n) {
      this.pageName = n.query.designCourseName || "coursesList";
      if (n.name === "Creativeourse") return (this.pageName = "");
      // if (!n.query.designCourseName) {
      //   this.$router.push({name: "Designcourse", query: {designCourseName: "coursesList"}})
      // }
    },
  },
  created() {
    this.pageName = this.$route.query.designCourseName || "coursesList";
    this.$store.dispatch("courses/fetchDesignCourses", {that: this})
    this.$store.dispatch('courses/fetchDesignDeteleCoursesList')
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      myDesigningCourses: (state) => state.courses.myDesigningCourses,
      publishedCourses: (state) => state.courses.publishedCourses,
      otherDesigncourselist: (state) => state.courses.otherDesigncourselist,
      designDeleteCourses: (state) => state.courses.designDeleteCourses
    }),
    headPic() {
      return this.userInfo.iconPath === "/iconPath.png"
        ? require("@/assets/images/headPic.svg")
        : this.userInfo.iconPath;
    },
    getCourseCount() {
      return {
        coursesList: this.myDesigningCourses.length || 0,
        coursePublished: this.publishedCourses.length || 0,
        BrowseOtherCourse: this.otherDesigncourselist.length || 0,
        LatelyDelete : this.designDeleteCourses.length || 0
      }
    }
  },
};
</script>

<style lang="stylus">
.creative {
  padding-bottom: 20px;
  min-width: 1200px;

  .creativeInfo {
    height: 148px;
    background-color: #003262;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .container {
      padding: 15px 0 0;
      margin: 0 auto;
      max-width: 1200px;
      height: 100%;

      .position {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        position: relative;
        left: 0;
        top: 8px;
        height: 100%;
        width: 100%;

        .picture {
          // display: flex;
          // justify-content: center;
          // align-items: center;
          width: 132px;
          height: 132px;
          background: #fff;
          border-radius: 50%;

          img {
            object-fit: cover;
            position: relative;
            left: 50%;
            top: 50%;
            width: 124px;
            height: 124px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
          }
        }

        .info {
          margin-top: 21px;
          margin-left: 25px;

          .name {
            font-family: PMingLiU-ExtB;
            font-size: 20px;
            color: #ffffff;
          }

          .label {
            margin-top: 10px;
            margin-right: 5px;
            width: fit-content;
            display: inline-block;
            height: 21px;
            padding: 1px 2px;
            line-height: 21px;
            background-color: #fea91b;
            border-radius: 5px;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>